/*评论组件*/
class ConmmentThree extends React.Component {
	constructor (){
		super();
        this.state = {
            dataList : [],
            commentInput:'',
            complete:false,
            isRequesting:false
        }
		this.page=0
    }
    componentDidMount (){
        this.Load()
    }
    
    Load (){
    	var dataList=this.state.dataList,
    		last= dataList.length ? dataList[dataList.length-1].created_date : Date.now();
        $.ajax({
            type: "GET",
            url: "/photos/"+this.props.photoId+"/comments?count=5&since="+last,
            dataType: "json",
            success : function (data){
            	if(data && data.success && data.data.length){
            		this.setState({
	                    dataList : this.state.dataList.concat(data.data),
	                    complete : data.data.length<5
	                })
            	}else{
            		this.setState({
	                    complete : true
	                })
            	}
            }.bind(this),
            error:function(){
            	this.setState({
                    complete : true
                })
            }.bind(this)
        })
    }
    input (e){
    	this.setState({
    		commentInput:e.target.value
    	})
    }
    submit (e){
    	e.preventDefault();
    	var commentInput=$.trim(this.state.commentInput),
    		isRequesting=this.state.isRequesting;

    	if(commentInput && !isRequesting){
    		this.setState({
                commentInput : '',
                isRequesting:true
            });
			
			//追踪评论事件
			//fa('send','submit','comment');

    		$.ajax({
	            type: "post",
	            url: "/photos/"+this.props.photoId+"/comments",
	            dataType: "json",
	            data: {
	            	wall_id:wallId,
	            	content:commentInput
	            },
	            success : function (data){
	            	if(data && data.success){
	            		this.setState({
		                    dataList : [data.data].concat(this.state.dataList),
		                    isRequesting:false
		                });
		                this.props.card.setState({
							comments:this.props.card.state.comments+1
						})
	            	}else{
	            		this.setState({
		                    isRequesting:false
		                })
	            	}
	            }.bind(this),
	            error:function(){
	            	this.setState({
	                    isRequesting:false
	                })
	            }.bind(this)
	        })
    	}
        return false
    }
   	render (){
	   	var self=this,
	   		app=this.props.app,
	   		complete=this.state.complete,
	   		isRequesting=this.state.isRequesting;

	   	return (
	        <div className="weui_tab TabStyle">
	            <div>
	                <div id="list" className="pull-left">
	                    <div id="huifu">
	                        <div className='text-box'>
	                            <form onSubmit={this.submit.bind(this)}>
	                                <input  className="form-control comment pull-left inputTextColor" type="text" placeholder= {i18next.t('home.common.comments.placeholder')} onChange={this.input.bind(this)} value={this.state.commentInput} />
	                                <input className="btn btnStyle" type="submit" disabled={isRequesting} value={isRequesting? i18next.t('home.common.comments.committing'):i18next.t('home.send')}/>
	                            </form>
	                        </div>
	                    </div>
	                    {this.state.dataList.map(function(event,index) {
	                        return (event.user?<ConmmentFour comment={self} app={app} key={index} index={index} event={event} />:'');
	                    })}
	                </div>
	                {!complete? <div className="pull-left ADivStyle"><a href="javascript:;" onClick = {this.Load.bind(this)}>{i18next.t('home.loadmore')}</a></div>:''}
	            </div>
	       </div>
	   	)
   	}
};

class ConmmentFour extends React.Component {
	deleteComment (){
		var app=this.props.app,
			comment=this.props.comment,
			event = this.props.event,
			index=this.props.index,
			dataList=comment.state.dataList;

		app.react.setState({
			confirmOptions:{
				title: i18next.t('home.isdelete'),
				content: i18next.t('home.eliminate'),
				confirm:function(){
					$.ajax({
						type:'DELETE',
						url:'/photos/:photo_id/comments',
						data:{
							comment_id:event['_id']
						},
						dataType:'json',
						success:function(data){
							if(data.success){
								dataList.splice(index,1)
								comment.setState({
									dataList:dataList
								});
								comment.props.card.setState({
									comments:comment.props.card.state.comments-1
								})
							}
						}
					})
				}
			}
		})
	}
    render (){
        var app=this.props.app,
        	event = this.props.event;

        return (
            <div className="box clearfix">
                <div className="content">
                    <div className="comment-list">
                        <div className="comment-box clearfix" user="other">
                            <div className="comment-content">
                                <div className="pull-left PLImgDiv">
                                    <img className="myhead" src={event.user.profile_image} alt=""/>
                                </div>

                                <p className="comment-text">
                                	<span className="user">{event.user.name}</span>
                                	{app.isAdmin?<i className="glyphicon glyphicon-remove pull-right text-muted" onClick={this.deleteComment.bind(this)} title={i18next.t('moderate.trash')}></i>:''}
                                </p>
                                <p className="comment-time">
                                    {event.create_data}
                                </p>
                                <p className="FontSIZE">{event.content}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}